<template>
  <div class="allTop">
    <el-dialog
      title="查看"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      width="1200px"
    >
      <div class="checkMain">
        <div class="checkMain_0">
          <h2>库存信息</h2>
          <div>农资名称：{{ nzName }}</div>
          <div>型号：{{ nzModel }}</div>
          <div>规格：{{ nzSpecs }}{{ nzMeteringUnit }}/{{ nzUnit }}</div>
          <div>库存总数：{{ nzQty }}{{ nzUnit }}</div>
          <div>保质期：{{ nzPeriod }}{{ nzPeriodUnit }}</div>
          <div>生产商：{{ nzSupplier }}</div>
          <div
            style="width:200px;height:150px;background:black;margin-top:15px"
          ></div>
        </div>
        <div class="checkMain_1">
          <div style="color:black;line-height:50px">批次信息</div>
          <el-table
            height="320"
            :header-cell-style="tableHeaderColor"
            :row-class-name="tableRowClassName"
            :data="data"
            style="width: 100%;border:1px solid black"
            v-loading="tabload"
          >
            <el-table-column prop="id" label="序号" width="width">
              <template slot-scope="scope">
            {{scope.$index+1}}
        </template>
            </el-table-column>
            <el-table-column prop="batchCode" label="批次单号" width="width">
            </el-table-column>
            <el-table-column prop="optType" label="操作" width="width">
            </el-table-column>
            <el-table-column prop="personId" label="操作人" width="width">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="时间" width="width">
            </el-table-column>
            <el-table-column prop="qty" label="批次数量" width="width">
            </el-table-column>
            <el-table-column  label="单价" width="width">
              <template slot-scope="scope">
                  {{scope.row.price / 100}}元
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="complete"
          style="    color: #fff;
    background-color: #11C26D;
    border-color: #11C26D;"
          >完 成</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {queryUser} from "@/api/manage"
export default {
  data() {
    return {
      tabload:true,
      data: [],
      nzName: "",
      nzModel: "",
      nzSpecs: "",
      nzUnit: "",
      nzPeriod: "",
      nzPeriodUnit: "",
      nzSupplier: "",
      nzMeteringUnit: "",
      nzQty: "",
      nzSupplier: "",
      // dialogVisible:show
      visible: false
    };
  },
  created() {},

  methods: {
    show(status, row ,tabload) {
      this.visible = status;
      this.nzName = row.goodsName;
      this.nzModel = row.model;
      this.nzSpecs = row.specs;
      this.nzMeteringUnit = row.meteringUnit;
      this.nzUnit = row.unit;
      this.nzQty = row.qty;
      this.nzPeriod = row.period;
      this.nzPeriodUnit = row.periodUnit;
      this.nzSupplier = row.supplier;
      this.tabload = tabload
    },
    letter(row){
         this.data = row
        //  console.log(this.data)
    },
    complete() {
      this.visible = false;
      // queryUser().then(res=>{
      //   console.log(res)
      // })
    },
    // 设置表头样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color: #009865;color: #000;font-weight: 500;";
    },
    // 设置斑马样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "columns-row-a";
      } else if (rowIndex % 2 === 1) {
        return "columns-row-b";
      }
    }
  },
};
</script>

<style scoped>
.el-table .columns-row-a {
  background: black;
}

.el-table .columns-row-b {
  background: #ffffff;
}
.checkMain {
  height: 400px;
  width: 100%;
  /* background: red; */
  display: flex;
}
.checkMain_0 {
  padding: 10px;
  width: 20%;
  height: 100%;
  /* background: hotpink; */
}
.checkMain_1 {
  flex: 1;
  /* background: green; */
}
.allTop >>> .el-dialog__header {
  background: #009865;
}
.allTop >>> .el-dialog__title {
  color: white;
  font-size: 16px;
}
.allTop >>> .el-dialog__header {
  padding: 10px 10px 10px;
}
.allTop >>> .el-dialog__headerbtn {
  position: absolute;
  top: 15px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
/* .allTop >>>.el-table__body-wrapper{
height: 200px;
overflow-y: auto;
} */
/deep/.el-table--scrollable-y ::-webkit-scrollbar {
  display: none;
}
.allTop >>> .gutter {
  background: #009865 !important;
}
</style>
